<template>
	<view :data-theme='theme()' :class="theme() || ''">
		<view class="card-top" v-if="!cardLoading &&listData.length>0">

			<swiper ref="mySwiper" :current="current" previous-margin="35rpx" next-margin="35rpx" class="swiper "
				@change="changeSwiper">
				<swiper-item v-for="(item, index) in listData" :key="index">
					<view class="card-item" :style="{
				      backgroundImage: 'url(' + item.image + ')',
				      backgroundSize: 'cover',
				      backgroundPosition: 'center'
				    }">
						<view class="card-overlay">
							<view class="swiper-items-btn" :style="{ color: item.fontColor }">
								<text v-if="item.finishStatus==0">待解锁</text>
								<text v-if="item.finishStatus==1">当前等级</text>
								<text v-if="item.finishStatus==2">已解锁</text>
							</view>
							<view class="card-item-header d-c mt20">
								<view class="user-info ww100 mt20">
									<text class="icon iconfont icon-VIP-m mr10"
										:style="{ color: item.fontColor }"></text>
									<text class="user-name mr10" :style="{ color: item.fontColor }">
										{{ user.nickName }}
									</text>
									<text class="user-level"
										:style="{ color: item.fontColor,borderColor: item.fontColor }">
										{{ item.name }}
									</text>
								</view>
								<view class="f24 fb mt20" :style="{ color: item.fontColor }">
									商城购物享{{ item.equity/10 }}折
								</view>
							</view>
							<view class="commission-rates d-s-s d-r ">
								<view class="rate ">
									<text class="label" :style="{ color: item.fontColor }">
										累计消费
									</text>
									<text class="value" :style="{ color: item.fontColor }">
										{{ item.upgradeMoney||'0.00' }}
									</text>
								</view>
								<view class="rate ml80">
									<text class="label" :style="{ color: item.fontColor }">
										累计积分
									</text>
									<text class="value" :style="{ color: item.fontColor }">
										{{ item.upgradePoints||'0.00' }}
									</text>
								</view>
								<view class="rate ml80">
									<text class="label" :style="{ color: item.fontColor }">
										推荐人数
									</text>
									<text class="value" :style="{ color: item.fontColor }">
										{{ item.upgradeInvite||'0' }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="level-bar-wrapper">
				<view class="level-bar-line"></view>
				<view v-for="(item, idx) in listData" :key="'dot-' + idx" class="level-dot"
					:class="{ active: current === idx }" @tap="goTo(idx)"
					:style="{ left: (100/(listData.length-1))*idx + '%' }"></view>
				<view v-for="(item, idx) in listData" :key="'label-' + idx" class="level-label"
					:class="{ active: current === idx }" @tap="goTo(idx)"
					:style="{ left: (100/(listData.length-1))*idx + '%' }">
					{{ item.name }}
				</view>
			</view>
			<template v-if="equityList">
				<view class="card-privilege">会员权益</view>
				<view class="card-privilege-lists">
					<view class="d-c d-c-c  mr40" v-for="(item,index) in equityList" :key="index">
						<image lazy-load class="privilege-image" :src="item.image" mode="aspectFill"></image>
						<text class="privilege-text">{{item.name}}</text>
					</view>
				</view>
			</template>
		</view>
		<view class="upgrade-panel" v-if="currentTasks.length>0">
			<view class="panel-header">
				<text class="title">快速升级技巧</text>
				<text class="sub">
					{{currentDescribe}}
				</text>
			</view>
			<view class="task-list">
				<view class="task-item" v-for="(t, i) in currentTasks" :key="i">
					<view class="task-info">
						<text class="task-name">{{ t.typeName }}</text>
						<view class="task-progress">
							<view class="progress-bar">
								<view class="progress-inner" :style="{ width: (t.getNum  / t.number * 100) + '%' }" />
							</view>
						</view>
						<view class="d-b-c d-r ww100">
							<text class="task-desc">
								{{t.describe}}
							</text>
							<text class="progress-text">
								{{ t.getNum }} / {{ t.number }}
							</text>
						</view>
					</view>
					<button class="task-btn1" v-if="t.finishStatus">
						已完成
					</button>
					<button class="task-btn" @click="goTask(t)" v-else>
						去完成
					</button>
				</view>
			</view>
		</view>
		<recommendProduct :location="40"></recommendProduct>
	</view>
</template>

<script>
	import recommendProduct from '@/components/recommendProduct/recommendProduct.vue';
	export default {
		components: {
			recommendProduct
		},
		data() {
			return {
				card_detail: '',
				loading: true,
				cardLoading: true,
				page: 1,
				last_page: '',
				listData: [],
				detail: null,
				current: 0,
				cardDetail: '',
				taskList: [],
				user: {},
				equityList: [],
			}
		},
		computed: {
			currentTasks() {
				if (!this.listData.length) return [];
				return this.listData[this.current].taskList || [];
			},
			currentDescribe() {
				return this.listData[this.current]?.describe || ''
			},
		},
		onShow() {
			this.getData();
		},
		onLoad(e) {

		},
		watch: {
			current: function(n, o) {
				if (n != o) {
					console.log(n);
				}
			}
		},
		methods: {
			goTo(idx) {
				this.current = idx;
				// 如果你想程序化地切 swiper：
				this.$refs.mySwiper.swipeTo(idx, 300);
			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			goTask(e) {
				let url = e.page || '/pages/index/index';
				this.gotoPage(url);
			},
			/*获取数据 - 使用假数据 */
			getData() {
				this.loading = true;
				let self = this;
				self._post('user/user/gradeList', {}, function(res) {
					self.listData = res.data.list;
					self.user = res.data.user;
					self.equityList = res.data.equityList;
					const idx = self.listData.findIndex(item => item.finishStatus === 1);
					if (idx !== -1) {
						self.current = idx;
					}
					self.cardLoading = false;
					self.loading = false;
					uni.hideLoading();
				});

			},
			changeSwiper(e) {
				this.current = e.detail.current;
				this.detail = this.listData[this.current];
			},
			changeFunc(e) {
				this.detail = this.listData[this.current];
			},
		}
	};
</script>

<style lang="scss">
	.level-bar-wrapper {
		position: relative;
		height: 120rpx; // 根据你文字大小和点的大小来调
		margin: -10rpx 100rpx; // 调节间距
	}

	.level-bar-line {
		position: absolute;
		top: 60rpx; // 刻度点的一半高度
		left: -30rpx; // 两端留点空隙
		right: -30rpx;
		height: 2rpx;
		background: rgba(255, 255, 255, 0.3);
	}

	.level-dot {
		position: absolute;
		top: 52rpx;
		width: 14rpx;
		height: 14rpx;
		border-radius: 18rpx;
		background: #5b5a56;
		transform: translateX(-50%);
		transition: left 0.3s ease;
	}

	.level-dot.active {
		width: 12rpx;
		height: 12rpx;
		border: 5rpx solid #5b5a56;
		border-radius: 18rpx;
		background: #f4e0bc;
	}

	.level-label {
		position: absolute;
		top: 80rpx;
		font-size: 22rpx;
		color: #5b5a56;
		transition: left 0.3s ease, color 0.3s ease;
		white-space: nowrap;
		transform: translateX(-50%);
	}

	.level-label.active {
		color: #FFF; // 高亮文字色
		font-weight: bold;
		transform: translateX(-50%);
	}

	.card-top {
		width: 750rpx;
		padding: 25rpx 0 36rpx 0;
		background: #041622;
	}

	.swiper {
		width: 750rpx;
		height: 300rpx;
	}

	.swiper-items-btn {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 116rpx;
		height: 42rpx;
		line-height: 42rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card-privilege {
		font-size: 30rpx;
		color: #F5E9D5;
		font-weight: bold;
		padding-left: 50rpx;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.card-privilege-lists {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		overflow: auto;
		padding-left: 40rpx;
	}

	.privilege-image {
		width: 124rpx;
		height: 124rpx;
		margin-bottom: 16rpx;
		display: block;
	}

	.privilege-text {
		font-size: 24rpx;
		color: #ccc;
	}

	.card-item {
		width: 654rpx;
		height: 300rpx;
		margin: 0 auto;
		position: relative;
		/* 以此为定位上下文 */

		.card-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			border-radius: 20rpx;
		}

		.card-overlay {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;
			padding: 30rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.card-item-header {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;

			.user-info {
				white-space: nowrap;

				.iconfont {
					width: 48rpx;
					height: 40rpx;
				}

				.user-name {
					font-size: 30rpx;
					font-weight: bold;
					color: #FFF;
					/* 根据背景调整字体颜色 */
				}

				.user-level {
					padding: 5rpx 15rpx;
					line-height: 39rpx;
					border-radius: 20rpx;
					border: 1px solid #824401;
					text-align: center;
					font-size: 22rpx;

					margin-top: 6rpx;
				}
			}

			.crown {
				width: 100rpx;
				height: auto;
			}
		}

		.commission-rates {


			.rate {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.label {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
					margin-bottom: 8rpx;
				}

				.value {
					font-size: 36rpx;
					font-weight: bold;
					color: #FFF;
				}
			}
		}
	}

	.cuopon-box {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 31rpx 0 39rpx 26rpx;




	}

	.upgrade-panel {
		background: #fff;
		margin: 0 24rpx;
		border-radius: 16rpx;
		padding: 30rpx 24rpx;
		margin-top: 20rpx;

		.panel-header {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			border-bottom: 1px solid #eee;
			padding-bottom: 40rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}

			.sub {
				font-size: 24rpx;
				color: #999;
			}
		}

		.task-list {
			margin-top: 40rpx;

			.task-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.task-info {
					.task-name {
						font-size: 28rpx;
						color: #333;
					}

					.task-desc {
						font-size: 24rpx;
						color: #999;
						margin-top: 6rpx;
					}
				}

				.task-btn {
					background: #F82E4D;
					border-radius: 38rpx;
					color: #fff;
					padding: 5rpx 30rpx;
					font-size: 24rpx;
				}

				.task-btn1 {
					background: #ddd;
					border-radius: 38rpx;
					color: #fff;
					padding: 5rpx 30rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	/* --- 为你推荐 --- */
	.recommend-panel {
		margin: 30rpx 0;

		.title {
			height: 100rpx;
			font-size: 30rpx;
		}

		.title .name {
			margin: 0 20rpx;
			font-size: 30rpx;
			color: #090000;
		}

		.title .line {
			position: relative;
			display: block;
			width: 100rpx;
			border-top: 1px solid red;
		}

		.title .line::after {
			position: absolute;
			content: '';
			display: block;
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: red;
		}

		.title .left-line::after {
			right: 0;
			top: -9rpx;
		}

		.title .right-line::after {
			left: 0;
			top: -9rpx;
		}

		.recommend-title {
			text-align: center;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.products {
			display: flex;
			justify-content: space-between;
			padding: 0 24rpx;

			.product-card {
				width: 330rpx;
				background: #fff;
				border-radius: 16rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.product-img {
					width: 100%;
					height: 300rpx;
					border-radius: 12rpx;
				}

				.product-name {
					font-size: 24rpx;
					color: #333;
					margin: 12rpx 0;
					height: 60rpx;
					overflow: hidden;
				}

				.price-wrap {
					display: flex;
					align-items: baseline;

					.price {
						font-size: 32rpx;
						color: #FF3B30;
					}

					.origin-price {
						font-size: 24rpx;
						color: #999;
						text-decoration: line-through;
						margin-left: 12rpx;
					}
				}

				.sold {
					font-size: 22rpx;
					color: #999;
					margin-top: 8rpx;
				}
			}
		}
	}

	.line-left {
		width: 80px;
		height: 3px;
		@include background_color("background_color");

	}

	.line-right {
		width: 80px;
		height: 3px;
		@include background_color("background_color");

	}

	.task-progress {
		margin: 8rpx 0 12rpx;
		display: flex;
		align-items: center;

		.progress-text {
			font-size: 24rpx;
			color: #333;
			margin-right: 12rpx;
		}

		.progress-bar {
			flex: 1;
			width: 486rpx;
			height: 16rpx;
			background: #f0f0f0;
			border-radius: 8rpx;
			overflow: hidden;

			.progress-inner {
				height: 100%;
				background: #f1abb6;
				border-radius: 8rpx;
			}
		}
	}
</style>